<template>
    <div class='detail-content flex flex-col'>
        <div class="w-full flex items-center cursor-pointer max-w-max" @click="goBack">
            <img class="w-20px h-20px " :src="iconArrowL" alt="">
            <span class="text-xl text-[#fff] font-bold ml-4">跨域通办</span>
        </div>
        
        <div class="flex-1 overflow-y-auto">
            <ul class="mt-25px grid grid-cols-4 gap-15px">
                <li class="item-li flex items-center relative pl-26px" @click="openUrl(kytbList[0].path)">
                    <img class="w-[36px] h-[36px]" :src="kytbList[0].icon" alt="">
                    <img class="w-56px h-56px absolute top-0 right-0" :src="iconkq" alt="">
                    <span class="text-[#fff] text-base font-bold ml-4">{{ kytbList[0].name }}</span>
                </li>
            </ul>
            
            <ul class="mt-25px grid grid-cols-4 gap-15px pr-15px mt-52px">
                <li class="item-li flex items-center relative pl-26px" v-for="(item, i) in noFirstList" :key="i" @click="openUrl(item.path)">
                    <img class="w-[36px] h-[36px]" :src="item.icon" alt="">
                    <span class="text-[#fff] text-base font-bold ml-4">{{ item.name }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import iconArrowL from "@/assets/image/icon/icon-arrow-l.png"
    import iconkq from "@/assets/image/icon/icon-kq.png"
    import { useCacheStore } from "@/store/modules/cacheData"
    import { openUrl } from "@/utils"
    const { kytbList } = storeToRefs(useCacheStore())

    const emit = defineEmits(['update:show'])

    const route = useRoute()
    const router = useRouter()
    const goBack = () => {
        if(route.query.pageType && route.query.pageType == 'kqb') {
            router.push('/')
        }else {
            emit('update:show', false)
        }
    }

    const noFirstList = computed(() => {
        return kytbList.value.slice(1)
    })
</script>

<style lang="scss" scoped>
    .detail-content {
        width: 100%;
        height: calc(100% - 140px);
        margin-top: 19px;
        margin-bottom: 24px;
        padding: 26px 15px 18px 30px;
        background: radial-gradient( 182% 209% at 50% 13%, rgba(0, 186, 255, .5) 0%, rgba(22, 119, 255, .5) 45%, rgba(0,85,254,0.38) 100%);
        border: 2px solid;
        border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.43), rgba(255, 255, 255, 0.08)) 1 1;

        .fw-tab-active {
            position: relative;

            &::after {
                content: '';
                position: absolute;
                height: 3px;
                width: 106%;
                background-color: #fff;
                left: -2%;
                bottom: -6px;
            }
        }

        .item-li {
            height: 56px;
            cursor: pointer;
            transition: all .3s;
            background: radial-gradient( 182% 209% at 50% 13%, rgba(0, 186, 255, .5) 0%, rgba(22, 119, 255, .5) 45%, rgba(0,85,254,0.38) 100%);
            border: 1px solid;
            border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.08)) 1 1;
            overflow: hidden;
            
            &:hover {
                background: radial-gradient( 182% 209% at 50% 13%, rgba(0, 186, 255, .8) 0%, rgba(22, 119, 255, .8) 45%, rgba(0,85,254,0.88) 100%);
            }
        }
    }
</style> 